<template>
	<view class="success-bg">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">订单支付</text>
		</view>
		<!-- 白色卡片 -->
		<view class="card">
			<view class="icon-bg">
				<image src="/static/whb/正确.png" class="success-icon" mode="aspectFill" />
			</view>
			<view class="success-text">支付成功</view>
			<view class="amount">39.90</view>
			<view class="order-row">
				<text class="order-label">预约编号：</text>
				<text class="order-num">324252536363634</text>
			</view>
			<button class="btn-primary" @tap="goHome">返回首页</button>
			<button class="btn-secondary" @tap="goToOrderDetails">订单详情</button>
		</view>
	</view>
</template>

<script setup>
function goHome() {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

function goToOrderDetails() {
	uni.navigateTo({
		url: '/pages/whb/04-orderdetails/04-orderdetails'
	})
}
</script>

<style scoped>
.success-bg {
	min-height: 100vh;
	background: #f7f7f7;
	position: relative;
}
.nav-bar {
	height: 400rpx;
	background: linear-gradient(180deg, #258aff 0%, #1677ff 100%);
	display: flex;
	justify-content: center;
	padding-top: 40rpx;
	position: relative;
}
.nav-title {
	color: #fff;
	font-size: 40rpx;
	font-weight: bold;
}
.card {
	position: absolute;
	left: 32rpx;
	right: 32rpx;
	top: 130rpx;
	background: #fff;
	border-radius: 32rpx;
	box-shadow: 0 8rpx 32rpx #e6e6e6;
	padding: 60rpx 32rpx 48rpx 32rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}

.success-icon {
	width: 120rpx;
	height: 120rpx;
}
.success-text {
	font-size: 36rpx;
	color: #222;
	font-weight: bold;
	margin-bottom: 32rpx;
}
.amount {
	font-size: 48rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 32rpx;
}
.order-row {
	margin-bottom: 48rpx;
	font-size: 28rpx;
	color: #333;
}
.order-label {
	color: #333;
}
.order-num {
	color: #1677ff;
	font-weight: bold;
}
.btn-primary {
	width: 100%;
	background: #1677ff;
	color: #fff;
	font-size: 32rpx;
	border-radius: 50rpx;
	height: 88rpx;
	line-height: 88rpx;
	margin-bottom: 32rpx;
	font-weight: bold;
}
.btn-secondary {
	width: 100%;
	background: #ccc;
	color: #fff;
	font-size: 32rpx;
	border-radius: 50rpx;
	height: 88rpx;
	line-height: 88rpx;
	font-weight: bold;
}
</style>
